<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2024-08-04 21:36:40
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-07-09 22:35:28
 * @FilePath: \react\09.react中的事件处理\1.事件处理.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1.事件处理</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel"> /* 此处一定要写babel */
    /****************
     * (1),通过onXxx属性指定事件处理函数(注意大小写)
     *  a.React使用的是自定义(合成)事件.而不是使用的原生DOM事件,onClick ----为了更好的兼容性
     *  b.React中的事件是通过委托方式处理的(委托给组件最外层的元素------为了更高效
     * (2),通过event.target得到发生事件的DOM元素对象,不要过度使用ref
     * (3),发生事件的事件对象或者事件源事件元素,正好是要操作的元素,可以避免使用ref
     * (4),发生事件的事件源刚好就是要操作的元素本身的时候可以不用写ref事件默认传递event
     * ****************/ 
    //1.创建组件
    class Demo extends React.Component{
        //创建ref容器
        myRef = React.createRef()
        myRef2 = React.createRef()
        //展示左侧输入框中的数据
        showData = ()=>{
            console.log("!!!!!!!!",this)
            //refs写法
            // const {input1} = this
            // alert(input1.value)
            const {current:{value}} = this.myRef
             alert(value)
        }
        showData2=(event)=>{
            //event.target 
            console.log("event.target.value",event.target.value)
           alert(event.target.value)
        }
       render(){
            return(
                <div>
                    <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
                    <button style={{margin:'0 5px'}} onClick={this.showData} > 点击按钮提示左侧数据</button>
                   { /*发生事件的事件对象或者事件源事件元素,正好是要操作的元素,可以避免使用ref*/}
                   <input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
                    {/*<input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>*/}
                </div>
            )
       }
     }
    //2.渲染虚拟DOM到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>

</html>